<template>
  <div class="role">
    <PageSearch
      @queryBtnClick="(queryBtnClick as any)"
      @resetBtnClick="(resetBtnClick as any)"
      :SearchFromConfig="SearchFromConfig"
    ></PageSearch>
    <pageContent
      ref="pageContentRef"
      :ContentTableConfig="ContentTableConfig"
      @editDataClick="(editDataClick as any)"
      @newCreateClick="(newCreateClick as any)"
      pageName="role"
    ></pageContent>
    <PageModal
      ref="pageModalRef"
      pageName="role"
      :otherFromData="otherFromData"
      :defaultFromData="ModelEditData"
      :modalConfig="modalConfig"
    >
      <!-- @node-click="handleNodeClick" -->
      <el-tree
        ref="elTreeRef"
        :data="menus"
        show-checkbox
        node-key="id"
        @check="handleCheckChange"
        :props="{ children: 'children', label: 'name', disabled: 'false' }"
      />
    </PageModal>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { useStore } from '@/store';

import { ElTree } from 'element-plus';
import PageSearch from '@/components/pageSearch';
import pageContent from '@/components/pageContent';
import PageModal from '@/components/page-modal';

import { usePageSearch } from '@/hooks/usePageSearch';
import { usePageModal } from '@/hooks/usePageModal';
import { getMenuLeafKeys } from '@/utils/map.menus';

import { SearchFromConfig } from './config/search.config';
import { ContentTableConfig } from './config/contentTable.config';
import { modalConfig } from './config/modal.config';

const [queryBtnClick, resetBtnClick, pageContentRef] = usePageSearch();

const elTreeRef = ref<InstanceType<typeof ElTree>>();

const editRole = (item: any) => {
  const leafKeys = getMenuLeafKeys(item.menuList);
  // 注意id之间的配合
  // nextTick(() => {
  //   elTreeRef.value?.setCheckedKeys(leafKeys, false);
  // });
  setTimeout(() => {
    // console.log(leafKeys);
    elTreeRef.value?.setCheckedKeys(leafKeys, false);
  }, 0);
};

const [pageModalRef, newCreateClick, editDataClick, ModelEditData] =
  usePageModal(editRole);

const store = useStore();
const otherFromData = ref({});
const menus = computed(() => store.state.allMenu);

const handleCheckChange = (_data1: any, data2: any) => {
  const checkedKeys = data2.checkedKeys;
  const halfCheckedKeys = data2.halfCheckedKeys;
  const menuList = [...checkedKeys, ...halfCheckedKeys];
  otherFromData.value = { menuList };
};
</script>

<style scoped></style>
